<template>
	<view class="content">
		<view :class="['item',item.status==1?'read':'']" @click="todetail(1)" v-for="item in list">
			<view class="title">{{item.title}}</view>
			<view class="info">{{item.content}}</view>
			<view class="time">{{item.add_time}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		supplyMsg,readMsg
	} from '../../../network/main.js';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	onShow(() => {
		getList()
	})
	const list = reactive([])
	const getList = () => {
		list.length = 0
		supplyMsg({}).then(res => {
			let arr = res.data.data.sort(function(a, b) {
				return new Date(b.add_time) - new Date(a.add_time)
			})
			Object.assign(list, arr)
		})
	}
	onNavigationBarButtonTap((event) => {
		let str= '';
		list.forEach(item=>{
			if(item.status==0){
				str += item.id +',';
			}
		})
		str = str.slice(0, -1)
		readMsg({ids:str}).then(res=>{
			getList()
		})
	})
	const todetail = (id) => {
		uni.switchTab({
			url: '/pages/inquiry/inquiry'
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f7f7f7;
		padding: 30rpx;
		box-sizing: border-box;

		.item {
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			color: #333;
			margin: 20rpx 0;

			.info {
				margin: 20rpx 0;
				height: 40rpx;
				font-size: 28rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.time {
				font-size: 24rpx;
			}
		}
		.read{
			color: #999;
		}
	}
</style>